<head>
    <script src="../build/index.js"></script>
</head>

<body>
    <canvas id="app"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'), {
            fullScreen: true
        });
        $app.start();

        Easycanvas.ImgLoader.cacheCanvas = true;

        window.Sprite1 = $app.add({
            name: 'house1',
            content: {
                img: 'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png',
            },
            style: {
                width: 300 * 1.5, height: 450 * 1.5,
                cutLeft: 0, cutTop: 0, // source position, default 0
                left: 200,
                top: 100,
                opacity: 1,
                locate: 'center', // default center
                zIndex: 1, // z-index of this image
            },
        });
        window.Sprite2 = $app.add({
            name: 'cloud1',
            content: {
                img: 'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png',
            },
            style: {
                width: 400 * 1.5, height: 250 * 1.5,
                cutLeft: 0, cutTop: 0, // source position, default 0
                left: Easycanvas.Transition.pendulum(0, 500, 5000).loop(),
                top: 100,
                opacity: 0.9,
                blend: 12,
                locate: 'center', // default center
                zIndex: 2, // z-index of this image
            },
        });

        window.Sprite3 = $app.add({
            name: 'house2',
            content: {
                img: 'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png',
            },
            style: {
                width: 300 * 1.5, height: 450 * 1.5,
                cutLeft: 0, cutTop: 0, // source position, default 0
                left: 200,
                top: 400 * 1.5,
                opacity: 1,
                locate: 'center', // default center
                zIndex: 1, // z-index of this image
            },
        });
        window.Sprite4 = $app.add({
            name: 'cloud2',
            content: {
                img: 'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png',
            },
            style: {
                width: 400 * 1.5, height: 250 * 1.5,
                cutLeft: 0, cutTop: 0, // source position, default 0
                left: Easycanvas.Transition.pendulum(0, 500, 5000).loop(),
                top: 400 * 1.5,
                opacity: 0.9,
                locate: 'center', // default center
                zIndex: 2, // z-index of this image
            },
        });


        $app.add({
            name: 'bg',
            content: {
                img: 'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png',
            },
            style: {
                locate: 'lt', // default center
                zIndex: -1, // z-index of this image
                width: document.body.clientWidth,
                height: document.body.clientHeight
            },
        });
        
    </script>
</body>

